/* eslint-disable no-new */ /* eslint-disable no-new */
<template>
  <section :id="canvasId + 7676767" class="draw-image">
    <div id="canvas-page">
      <div class="tools">
        <a-button title="上传底图" class="mb14" @click="uploadImg">
          <a-icon type="cloud-upload" />
          <cUpload
            v-show="false"
            ref="cUpload"
            class="load-img"
            text=""
            accept="png,jpg,jpeg,gif"
            @getUploadInfo="uploadImage"
          />
        </a-button>

        <a-button
          title="编辑文本"
          class="mb14 d-relative"
          @click.stop="showColor = !showColor"
        >
          <!--  @click="() => addText()" -->
          <div
            v-if="showColor"
            class="d-absolute color-list"
            @click.stop.prevent="e => setColor(e)"
          >
            <span color="red" class="c-red" />
            <span color="#ffc53d" class="c-yellow" />
            <span color="#1989fa" class="c-1989fa" />
            <span color="#333" class="c-333" />
            <span color="#999" class="c-666" />
            <span color="#fff" class="c-fff" />
          </div>
          <a-icon type="font-size" />
        </a-button>
        <a-button class="mb14" title="箭头" @click="addArrow">
          <arrowIcom />
        </a-button>

        <a-button class="mb14" title="删除选中" @click="removeSelect">
          <a-icon type="delete" />
        </a-button>

        <a-button title="保存" @click="saveData">
          <a-icon type="check" />
        </a-button>
      </div>
      <canvas :id="canvasId" width="900" height="500" />
    </div>
  </section>
</template>

<script>
import { fabric } from 'fabric'
import arrowIcom from './arrowIcon'
import cUpload from '@/view/ProcedureCenter/conponents/cUpload.vue'

import ResizeObserver from 'resize-observer-polyfill'
import debounce from 'lodash.debounce'
export default {
  name: 'CanvasPage',
  components: { cUpload, arrowIcom },
  props: {
    imgData: {
      type: String,
      default: '[{}]'
    },

    processSheetsId: {
      type: [String, Number],
      default: ''
    },
    id: {
      type: [String, Number],
      default: ''
    },
    canvasId: {
      type: String,
      default: 'canvas'
    },
    width: {
      type: Number,
      default: 800
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      showColor: false,
      imgageInfo: [],
      canvas: null,
      removeIcon: 'http://cdn-image.kapeixi.cn/web/images/delete.png',
      arrow: 'http://cdn-image.kapeixi.cn/web/images/arrow.png'
    }
  },
  watch: {
    imgData() {
      this.initDraw()
    }
  },
  mounted: function () {
    this.initCanvas()
    //  this.resizeUlHeight(this)
  },
  methods: {
    // 初始化绘图区域
    initCanvas: function () {
      const canvas = new fabric.Canvas(this.canvasId)
      const self = this
      canvas.on('mouse:leave', function (options) {
        if (options.target) {
          console.log('an object was clicked! ', options.target.type)
          self.imgageInfo = self.canvas.getObjects()
        }
      })
      canvas.on('mouse:out', function (options) {
        // self.saveData()
      })
      this.canvas = canvas

      this.initDraw()
    },
    // 初始化默认页面组件绘制
    initDraw: function (val = null) {
      const arr = val || JSON.parse(this.imgData)

      arr &&
        this.canvas.loadFromJSON({
          objects: arr
        })
    },
    setColor(e) {
      console.log(e.target.getAttribute('color'))
      if (e.target.tagName.toLowerCase() === 'span') {
        this.addText(e.target.getAttribute('color'))
        this.showColor = false
      }
    },
    uploadImg() {
      // 图片上传
      this.$refs.cUpload.$refs.upload.click()
    },
    // 上传图像
    uploadImage: function (info) {
      // upload success
      console.log(info)
      this.addImage(info.ossUrl)
    },
    // 向画布左上角绘制新图像
    addImage: function (path = null, left = 0, top = 0) {
      if (path === null) return
      const { canvas } = this
      // eslint-disable-next-line new-cap
      new fabric.Image.fromURL(path, function (image) {
        image.set({
          left,
          top,
          path,
          zIndex: -1
        })
        canvas.add(image)
      })
    },
    // 向画布左上角绘制新文字
    addText: function (color = '#D81B60') {
      const { canvas } = this
      const text = new fabric.IText('请输入内容', {
        left: 0,
        top: 0,
        fill: color,
        zIndex: 2,
        fontSize: 14
      })
      canvas.add(text)
    },
    // 向画布左上角绘制新箭头
    addArrow: function () {
      const { arrow } = this
      this.addImage(arrow, 0, 30)
    },
    // 删除选中
    removeSelect: function () {
      this.canvas.remove(this.canvas.getActiveObject())
    },
    // 存储参数
    saveData: function () {
      this.imgageInfo = this.canvas.getObjects()
      const { id: descPluginId, processSheetsId } = this
      this.$api.plan
        .fetchList('/process/upload-process-sheets-plugin', {
          processSheetsId: this.$route.query.processSheetId || processSheetsId,
          descPluginId,
          pluginContent: JSON.stringify(this.imgageInfo)
        })
        .then(res => {
          console.log(res)
          res && this.$message.success('图片保存成功！')
          this.$emit('getDescPluginId', { descPluginId: res })
        })
    },
    clearCanvas() {
      this.initDraw([])
    },

    drawCanvas: function () {
      this.initCanvas()
    },
    // 撤销
    revoke() {
      console.log(this.imgageInfo)
      this.imgageInfo.pop()
      console.log(this.imgageInfo)
      this.initDraw(this.imgageInfo)
    },
    resizeUlHeight(self) {
      const resizeObserver = new ResizeObserver(
        debounce(entries => {
          const parentWidth = document.getElementById(self.canvasId + 767676)
          console.dir(parentWidth, 3)
          const canvas = document.getElementById(self.canvasId)
          canvas.width = parentWidth.innerWidth - 85
          canvas.heght = parentWidth.innerHeight - 85
        }, 300)
      )
      resizeObserver.observe(document.body)
      this.$once('hook:beforeDestroy', () => {
        console.log('close CPCARD')
        resizeObserver.disconnect()
      })
    }
  }
}
</script>

<style>
.draw-image {
  background: #fff;
  width: 100%;
}
#canvas {
  border: 1px dashed #ddd;
}
#canvas-page {
  display: flex;
}
.tools {
  width: 86px;
  text-align: center;
  padding-top: 70px;
  margin-bottom: 20px;
}

.tools div {
  margin-top: 10px;
  cursor: pointer;
}

.load-img .click_upload {
  padding: 0 12px;
  display: inline-block;
}
.mb14 {
  margin-bottom: 14px;
}
.color-list {
  top: 10px;
  left: 52px;
  top: -91px;
  padding: 12px;
  z-index: 3;
  background: #57575b;
  border-radius: 2px;
}
.color-list:before {
  display: inline-block;
  content: '';
  width: 10px;
  height: 10px;
  border-width: 10px;
  position: absolute;
  transform: rotate(45deg);
  left: -5px;
  top: 44%;
  background-color: #57575b;
  margin-right: 5px;
  vertical-align: middle;
}
.color-list span {
  display: block;
  width: 18px;
  margin-bottom: 13px;
  height: 18px;
  border: 1px solid #fff;
}
.c-red {
  background: red;
}
.c-yellow {
  background: #ffc53d;
}
.c-1989fa {
  background: #1989fa;
}
.c-333 {
  background: #333;
}
.c-666 {
  background: #666;
}
.c-fff {
  background: #fff;
}
.tools button:hover {
  color: #1989fa;
}
</style>
